import React,{Component} from 'react';
import './video.css';
export default class video extends Component{
    
    constructor(){
        super();
        let id = new Date().getTime();
        this.state={
            url:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?id='+id,
            autoplay:false,
            nowTime:0
        }
    }
    canplay=(even)=>{
        this.setState({
            long: even.target.duration
        }) 
    }
    play=(e)=>{
        let video=this.refs.videoobj;
        video.play();
    }
    pause=()=>{
        let video=this.refs.videoobj;
        video.pause();
    }
    time=()=>{
        let video=this.refs.videoobj;
        console.log(video.readyState);
    }
    time2=()=>{
        let long=this.state.long;
        let video = this.refs.videoobj;

        this.setState({
            nowTime: video.currentTime,
            update: video.buffered,
            width: (((video.currentTime / long).toFixed(2))*100)+'%'
        });
        // console.log(this.state.styles);
    }
    downing=(e)=>{
        // console.log(e)
    }
    render(){
        let state=this.state;
        return (
            <div className='video-box'>
                <div className='video-con'>
                    <video onProgress={this.downing.bind(this)} controls autoPlay={state.autoplay} onTimeUpdate={this.time2} src={state.url} onCanPlay={this.canplay} ref='videoobj'/>
                    <em onClick={this.play.bind(this)}>
                        播放
                    </em>　　
                    <em onClick={this.pause}>
                        暂停
                    </em>　　
                    <em onClick={this.time}>
                        当前时间
                    </em>
                    <em>
                        {/* 缓冲部分：{state.update} */}
                    </em>
                    <span>
                        {state.nowTime}
                    </span>
                    <div className='jdtBox'>
                        <div className='jdtHc'></div>
                        <div className='jdtPlayd' style={{ 'width': state.width}}></div>
                    </div>
                </div>
            </div>
        )
    }
}